<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>课程详情</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            max-width: 750px;
            margin: 0 auto;
            color: #333;
            background-color: #f5f5f5;
            padding-bottom: 70px;
        }
        
        .header {
            background-color: #2196F3;
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            position: relative;
        }
        
        .back-btn {
            position: absolute;
            left: 15px;
            top: 15px;
            font-size: 16px;
        }
        
        .course-cover {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .course-info {
            background-color: white;
            padding: 15px;
        }
        
        .course-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .course-meta {
            display: flex;
            margin-bottom: 15px;
        }
        
        .meta-item {
            margin-right: 15px;
            color: #666;
            font-size: 14px;
        }
        
        .course-price {
            color: #f44336;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        .course-teacher {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .teacher-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }
        
        .teacher-name {
            font-size: 15px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            padding: 15px;
            background-color: #f9f9f9;
            margin-top: 10px;
        }
        
        .course-content {
            background-color: white;
            padding: 15px;
            line-height: 1.6;
            font-size: 15px;
        }
        
        .chapter-list {
            background-color: white;
        }
        
        .chapter-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .chapter-title {
            font-size: 15px;
            margin-bottom: 5px;
        }
        
        .chapter-duration {
            color: #666;
            font-size: 13px;
        }
        
        .fixed-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 750px;
            margin: 0 auto;
            background-color: white;
            padding: 10px 15px;
            box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .price-container {
            flex: 1;
        }
        
        .original-price {
            font-size: 14px;
            color: #999;
            text-decoration: line-through;
            margin-right: 5px;
        }
        
        .current-price {
            color: #f44336;
            font-size: 18px;
            font-weight: bold;
        }
        
        .buy-btn {
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px 25px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }
        
        .locked-chapter {
            color: #999;
        }
        
        .locked-icon {
            color: #ff9800;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="back-btn" onclick="history.back()">←</div>
        课程详情
    </div>
    
    <img src="https://via.placeholder.com/750x200/2196F3/FFFFFF?text=课程封面" class="course-cover" alt="课程封面">
    
    <div class="course-info">
        <h1 class="course-title">HTML5与CSS3基础教程</h1>
        
        <div class="course-meta">
            <div class="meta-item">128人学习</div>
            <div class="meta-item">20课时</div>
            <div class="meta-item">4.9分</div>
        </div>
        
        <div class="course-price">¥99.00</div>
        
        <div class="course-teacher">
            <img src="https://via.placeholder.com/40/2196F3/FFFFFF?text=老师" class="teacher-avatar" alt="老师头像">
            <div class="teacher-name">张老师</div>
        </div>
    </div>
    
    <div class="section-title">课程简介</div>
    <div class="course-content">
        本课程从零开始讲解HTML5和CSS3的基础知识，包括HTML5新标签、语义化结构、CSS3选择器、盒模型、Flex布局、响应式设计等核心内容。通过大量实例演示，帮助学员快速掌握现代网页开发基础技术。
    </div>
    
    <div class="section-title">课程目录</div>
    <div class="chapter-list">
        <div class="chapter-item">
            <div class="chapter-title">第1章：HTML5基础</div>
            <div class="chapter-duration">4课时 · 120分钟</div>
        </div>
        <div class="chapter-item">
            <div class="chapter-title">第2章：CSS3基础</div>
            <div class="chapter-duration">5课时 · 150分钟</div>
        </div>
        <div class="chapter-item locked-chapter">
            <div class="chapter-title">第3章：Flex布局 <span class="locked-icon">🔒</span></div>
            <div class="chapter-duration">3课时 · 90分钟</div>
        </div>
        <div class="chapter-item locked-chapter">
            <div class="chapter-title">第4章：响应式设计 <span class="locked-icon">🔒</span></div>
            <div class="chapter-duration">4课时 · 120分钟</div>
        </div>
    </div>
    
    <div class="fixed-footer">
        <div class="price-container">
            <span class="original-price">¥199</span>
            <span class="current-price">¥99</span>
        </div>
        <button class="buy-btn" onclick="purchaseCourse()">立即购买</button>
    </div>
    
    <script>
        function purchaseCourse() {
            // 这里可以添加购买逻辑
            // 例如跳转到支付页面或调用支付API
            alert('即将跳转到支付页面');
            // window.location.href = '/payment?course_id=123';
            
            // 或者直接显示购买成功
            /*
            fetch('/api/purchase', {
                method: 'POST',
                body: JSON.stringify({ courseId: 123 }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('购买成功！');
                    window.location.href = '/my-courses';
                } else {
                    alert('购买失败: ' + data.message);
                }
            });
            */
        }
    </script>
</body>
</html>